/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component, PropTypes} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Animated
} from 'react-native';
import GCStyle from '../../Model/Global/GCStyle';
import GCComponent from '../../Model/Global/GCComponent';


export default class SelectorDate extends Component {

    constructor(props) {
        super(props);

        this.state = {
            fadeAnim: new Animated.Value(24), //设置初始值
            isOpen: false,
            selectName: null,
            selectRow: 0,
            selectArr: []
        };

    }

    static propTypes: {
        radius: React.PropTypes.number,
        txtSize: React.PropTypes.string,
        txtSize: React.PropTypes.string,
        selectArr: React.PropTypes.object,
        marTop: React.PropTypes.number,
        isFlexEnd:React.PropTypes.bool

    }

    componentDidMount() {
        this.setState({
            selectName: this.props.selectArr[this.props.selectRow],
            selectRow: this.props.selectRow,
            isFlexEnd: true,
            selectArr: this.props.selectArr
        })
    }

    static defaultProps = {
        radius: 150,            // 半径
        txtSize: 12,//字体大波
        txtColor: 'white',//字体颜色
        selectRow: 0,
        selectArr: ['选择一', '选择二', '选择三'],
        marTop: 24
    };

    onAction(index) {
        let heightY;
        if (this.state.isOpen) {
            heightY = 24
            let a = this.state.selectArr;
            if(index>=0){
                [a[0], a[index]] = [a[index], a[0]];
                if (this.props.onSelectAction) {
                    this.props.onSelectAction(index, this.props.selectArr[index]);
                }
            }
            this.setState({
                selectName: this.props.selectArr[index],
                selectRow: index,
                selectArr: a

            })
        } else {
            heightY = 72;
        }
        this.setState({
            isOpen: !this.state.isOpen,
        })
        Animated.timing(
            this.state.fadeAnim,//初始值
            {
                toValue: heightY,
                duration: 100
            }//结束值
        ).start();//开始

    }

    hide() {
        if (this.state.isOpen) {
            this.onAction(-1);
        }

    }

    render() {
        return (
            <View style={[styles.container, {marginTop: this.props.marTop, right: 10}]}>
                <View style={[{height: this.state.isOpen ? 70 : 24}]}>
                    <Animated.View style={{backgroundColor:'white',height: this.state.fadeAnim, overflow: 'hidden', alignItems: 'center'}}>
                        {
                            this.state.selectArr.map((item, index) => {
                                return (
                                    <TouchableOpacity key={index} onPress={() => this.onAction(index)} style={[styles.actionBn, {
                                        width: 70,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        backgroundColor: index === 0 ? '#F7F7F7' : 'transparent',
                                        justifyContent: 'center',
                                        borderRadius: 6,
                                        borderColor:'#d2d2d2',
                                        // borderTopColor: index==1?'transparent':'#d3d3d3',
                                        // borderLeftColor: '#d3d3d3',
                                        // borderRightColor: '#d3d3d3',
                                        // borderBottomColor: (index==0 || index==this.state.selectArr.length-1)?'#d3d3d3':'transparent',
                                        borderWidth: 0.5,
                                        height: 24,
                                        zIndex:index==1?-1:index
                                    }]}>
                                        <Text style={{marginRight:2,height:16,color: index === 0 ? '#a5a5a5' : '#d2d2d2', fontSize: this.props.txtSize, textAlign: 'center'}}>{item}</Text>
                                        {index === 0 ?
                                            <Image resizeMode='contain'
                                                   source={this.state.isOpen ? require('../../Resource/Imgs/home_ikon_pressSele.png') : require('../../Resource/Imgs/home_ikon_press.png')}
                                                   style={{width: this.props.txtSize - 6, height: this.props.txtSize - 6}}/> : null
                                        }
                                    </TouchableOpacity>
                                )
                            })
                        }
                    </Animated.View>
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: 'flex-end',
        position: 'absolute',

    },
    actionBn: {
        flexDirection: 'row',
        alignItems: 'center',

    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        flex: 1
    },
    img: {
        width: 50,
        height: 50,
        resizeMode: "center",
    },
});

